<template>
    <el-form ref="ruleFormRef" label-width="120px" class="ruleForm" :size="formSize"
        status-icon>
        <div class="base-info">
            <div class="sub-title" style="border-top: none">
                <div class="line"></div>
                <span>基本信息</span>
            </div>
            <div class="gard-3-container">
                <el-form-item label="姓名" required prop="name">
                    <span>{{ info.name }}</span>
                </el-form-item>
                <el-form-item label="身份证号" required prop="idcard">
                    <span>{{ info.idcard }}</span>
                </el-form-item>
                <el-form-item label="联系电话" required prop="linkPhone">
                    <span>{{ info.linkPhone }}</span>
                </el-form-item>
            </div>
            <div class="gard-3-container">
                <el-form-item label="性别" required prop="sex">
                    <span>{{ info.sex }}</span>
                </el-form-item>
                <el-form-item required label="工作单位(在校生填写学校名称)"  prop="workCompany">
                    <span class="text-content">{{ info.workCompany }}</span>
                </el-form-item>
                <el-form-item label="证书邮寄地址" prop="addr">
                    <span class="text-content">{{ info.addr }}</span>
                </el-form-item>
            </div>
            <div class="gard-3-container">
                <el-form-item label="身份证照片" required prop="idcardFileId">
                    <el-image v-show="info.idcardFileUrl && info.idcardFileUrl!==''" class="image-view" :src="info.idcardFileUrl" :zoom-rate="1.2"
                        :preview-src-list="[info.idcardFileUrl]" fit="cover" />
                </el-form-item>
                <el-form-item label="证件照上传" required prop="idphotoFileId">
                    <el-image v-show="info.idphotoFileUrl && info.idphotoFileUrl!==''" class="image-view" :src="info.idphotoFileUrl" :zoom-rate="1.2"
                        :preview-src-list="[info.idphotoFileUrl]" fit="cover" />
                </el-form-item>
            </div>


        </div>
        <div class="teach-info">
            <div class="sub-title">
                <div class="line"></div>
                <span>教育情况</span>
            </div>
            <div class="gard-3-container">
                <el-form-item label="最高学历" required prop="education">
                    <span class="text-content">{{ info.education }}</span>
                </el-form-item>
                <el-form-item label="毕业院校" prop="graduateSchool">
                    <span class="text-content">{{ info.graduateSchool }}</span>
                </el-form-item>
                <el-form-item label="专业" prop="major">
                    <span class="text-content">{{ info.major }}</span>
                </el-form-item>
            </div>
            <div class="gard-3-container">
                <!-- <el-form-item label="毕业证" prop="diplomaFileId">
                    <el-image v-show="info.diplomaFileUrl && info.diplomaFileUrl!==''" class="image-view" :src="info.diplomaFileUrl" :zoom-rate="1.2"
                        :preview-src-list="[info.diplomaFileUrl]" fit="cover" />
                </el-form-item> -->
                <el-form-item label="在校证明(在校生需上传)" prop="schoolProve">
                    <el-image v-show="info.schoolProveUrl && info.schoolProveUrl!==''" class="image-view" :src="info.schoolProveUrl" :zoom-rate="1.2"
                        :preview-src-list="[info.schoolProveUrl]" fit="cover" />
                </el-form-item>
            </div>


        </div>
        <div class="work-info">
            <div class="sub-title">
                <div class="line"></div>
                <span>工作情况</span>
            </div>
            <div class="gard-3-container">
                <el-form-item label="技术职称" prop="technicalTitle">
                    <span class="text-content">{{ info.technicalTitle }}</span>
                </el-form-item>
                <el-form-item label="工作年限" prop="workYear">
                    <span class="text-content">{{ info.workYear }}</span>
                </el-form-item>
                <!-- <el-form-item label="其他证明" prop="otherProve">
                    <span class="text-content">{{ info.otherProve }}</span>
                </el-form-item> -->
            </div>

            <div class="gard-3-container">
                <!-- <el-form-item label="证书证明" prop="certificateProveId">
                    <el-image v-show="info.certificateProveUrl && info.certificateProveUrl!==''" class="image-view" :src="info.certificateProveUrl" :zoom-rate="1.2"
                        :preview-src-list="[info.certificateProveUrl]" fit="cover" />
                </el-form-item> -->
                <el-form-item label="社保证明" prop="wordProveId">
                    <el-image v-show="info.wordProveUrl && info.wordProveUrl!==''" class="image-view" :src="info.wordProveUrl" :zoom-rate="1.2"
                        :preview-src-list="[info.wordProveUrl]" fit="cover" />
                </el-form-item>
                <!-- <el-form-item label="其他证明" prop="otherProveId">
                    <el-image v-show="info.otherProveUrl && info.otherProveUrl!==''" class="image-view" :src="info.otherProveUrl" :zoom-rate="1.2"
                        :preview-src-list="[info.otherProveUrl]" fit="cover" />
                </el-form-item> -->
            </div>

        </div>
    </el-form>
</template>
  
<script setup>
const formSize = ref('default')
const props = defineProps({
    info: {
        type: Object,
        default: ()=>{
            return {}
        }
    }
})
</script>
<style lang="scss" scoped>
.ruleForm{
    :deep(.el-form-item__content){
        margin-top: -6px !important;
        align-items: start;
    }
    :deep(.el-form-item__label) {
        white-space: pre-wrap;
        text-align: right;
        height: auto;
        line-height: 20px;
        width: 150px !important;
    }

    :deep(.el-form-item) {
        margin-right: 0;
        // align-items: start;
        // margin-bottom: 0 !important;
    }
}
.gard-3-container {
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-auto-rows: minmax(50px, auto);
    grid-column-gap: 10px;
    overflow: hidden;
}

.transport-task {
    grid-column: 1/3;
}
.image-view{
    width: 150px;
    height: 150px;
}
.gard-2-container {
    display: grid;
    grid-template-columns: repeat(2, 48%);
    grid-auto-rows: minmax(50px, auto);
    // grid-template-rows: repeat(4, 50px);
    grid-column-gap: 20px;
    overflow: hidden;
}

.sub-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    padding-top: 24px;
    margin-bottom: 24px;
    border-top: 1px solid rgba(0, 48, 112, 0.2);

    .line {
        margin-right: 12px;
        width: 2px;
        height: 20px;
        background-color: #298DFF;
    }
}
.text-content{
    overflow: hidden;
    word-break: break-all;
}
</style>